<template>
  <div
    :class="{
      'unit-card': true,
      active: isActive || title === active?.title,
    }"
    @touchstart.stop="handleClick"
  >
    <div class="tag">{{ tag }}</div>
    <div class="buttons" v-if="!hideEdit">
      <div class="edit">
        <span class="material-symbols-outlined"> edit </span>
      </div>
      <div class="remove">
        <span class="material-symbols-outlined"> delete </span>
      </div>
    </div>

    <div class="title">{{ title }}</div>
    <div class="info">
      <div class="info-item">
        <div class="unit-info-icon">
          <span class="material-symbols-outlined"> account_circle </span>
        </div>
        <div class="unit-info-text">{{ name }}</div>
      </div>
      <div class="info-item">
        <div class="unit-info-icon">
          <span class="material-symbols-outlined"> call </span>
        </div>
        <div class="unit-info-text">{{ phone }}</div>
      </div>
      <div class="info-item">
        <div class="unit-info-icon">
          <span class="material-symbols-outlined"> mail </span>
        </div>
        <div class="unit-info-text">{{ email }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, toRefs, defineEmits } from 'vue'
const emit = defineEmits(['change'])
const props = defineProps([
  'tag',
  'title',
  'name',
  'phone',
  'email',
  'active',
  'isActive',
  'hideEdit',
])

const { tag, title, name, phone, email, active, isActive, hideEdit } =
  toRefs(props)

const handleClick = () => {
  emit('change', {
    ...props,
  })
}
</script>

<style lang="scss" scoped>
.unit-card {
  width: 100%;
  height: dpi(28rem);
  background-color: #ffffff;
  border: solid 1px #dddddd;
  position: relative;
  padding-left: 26px;
  opacity: 0.5;

  .title {
    font-family: PingFangSC-Semibold;
    font-size: dpi(3rem);
    letter-spacing: 0px;
    color: #05204d;
    margin-top: dpi(6rem);
  }

  .info {
    margin-top: dpi(2rem);
    &-item {
      display: flex;
      column-gap: dpi(2rem);
      align-items: center;
      height: dpi(3.5rem);
      .unit-info-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        .material-symbols-outlined {
          font-size: dpi(2rem);
          color: #05204d;
          opacity: 0.5;
        }
      }
      .unit-info-text {
        font-size: dpi(2rem);
        letter-spacing: 0px;
        color: #05204d;
      }
    }
  }
  &:hover {
    opacity: 1;
  }
  &.active {
    opacity: 1;
    background-color: #f2f8fb;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);
    border: solid 2px #0571b0;
    .tag {
      background-color: #0571b0;
    }
  }
  .tag {
    position: absolute;
    top: 0;
    left: 26px;
    width: dpi(9rem);
    height: dpi(4rem);
    background: rgba(5, 32, 77, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: PingFangSC-Semibold;
    font-size: dpi(2rem);
  }

  .buttons {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    .edit,
    .remove {
      width: dpi(6rem);
      height: dpi(4rem);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .material-symbols-outlined {
        font-size: dpi(2rem);
      }
    }
    .edit {
      border-left: 1px solid #dddddd;
      border-bottom: 1px solid #dddddd;
      border-right: 1px solid #dddddd;
      .material-symbols-outlined {
        color: #0571b0;
      }
    }
    .remove {
      border-bottom: 1px solid #dddddd;
      .material-symbols-outlined {
        color: #ff0000;
      }
    }
  }
}
</style>
